const { resolve } = require("path"); // node内置核心模块，用来设置路径。
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //引入将css打包成独立文件的插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");// 引入压缩css的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');// 打包html的插件
const CopyWebpackPlugin = require("copy-webpack-plugin");//打包公共文件
module.exports = {
    //打包模式
    mode: "production", //还有development模式
    //入口文件
    entry: "./src/index.js",
    //出口文件
    output: {
        path: resolve(__dirname, "./dist"),
        filename: "./js/bundle.js"
    },
    //模块配置，配置loader(加载器)
    module: {
        rules: [
            {
                test: /\.css$/i,
                //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                // use: [ "style-loader", 'css-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader']

            },
            {
                test: /\.less$/i,
                //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                // use: [ "style-loader", 'css-loader','less-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
            },
            {
                test: /\.(png|jpg|gif|webp)$/,
                //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 18 * 1024, // 小于18kb以下的图片会被打包成base64格式
                    },
                },
                generator: {
                    filename: 'images/[name][ext]' //大于18kb的图片设置
                }
            },
            // {
            //     test: /\.(htm|html)$/i,
            //     use: {
            //         loader: 'html-loader'
            //     }
            // },

        ]
    },

    // 优化
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
        minimize: true,
    },

    //插件配置
    plugins: [
        new MiniCssExtractPlugin({
            //输出独立文件的文件名
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin(
            {
                filename: "index.html",
                template: "./public/index.html" //以什么为模板
            }),
        new CopyWebpackPlugin({
            patterns: [{
                from: "./public",
                to: "public",
                //配置复制时忽略的文件
                globOptions: {
                    ignore: ["**/index.html"]
                }
            }]
        }),
    ]
}